<template>
  <div>
    全选：<input type="checkbox" v-model="isAll" @change="allChange()">
    <ul>
      <li v-for="(item, index) in prodocuArr" :key="index">
        <input type="checkbox" v-model="item.isCkd" @change="danChange()">
        ---名字：{{ item.name }}--
        价格：{{ item.pri }}--
        数量
        <button @click="add(item)">+</button>
        {{ item.num }}
        <button @click="sub(item)">-</button>
        ---小计
        {{ item.num * item.pri }}
      </li>
    </ul>
    总价：{{sum}}
  </div>
</template>
<script>
export default {
  mounted() {
    this.prodocuArr.forEach((v)=>{
      v.num = 0;
      v.isCkd= false;
      console.log('ok');
    })
  },
  data() {
    return {
      prodocuArr:[
        {id:1,name:'羊肉',pri:4},
        {id:2,name:'鱼肉',pri:5},
        {id:3,name:'牛肉',pri:6},
      ],
      isAll:false,
      sum: 0,
    }
  },

  methods: {
    
    // 加
    add(item){
      item.num++

      this.sumHandler()
    },

    // 减
    sub(item){
      if(item.num == 0){
        return
      }else{
        item.num--
      }

      this.sumHandler()
    },

    // 全选
    allChange(){
      this.prodocuArr.forEach(v=>{
        v.isCkd = this.isAll
      })

      this.sumHandler()
    },

    // 单选
    danChange(){
      let flag = this.prodocuArr.every(v=>{
        return v.isCkd == true
      })
      this.isAll = flag

      this.sumHandler()
    },

    // 求和 函数
    sumHandler(){
      let n = 0;
      this.prodocuArr.forEach(v=>{
        if(v.isCkd){
          n += v.num * v.pri
        }
      })
      this.sum = n
    }
  },
}
</script>
<style lang="">
  
</style>